<template>
  <div class="lt-container pd-15">
    <div class="pd-15 bg-white radius-6">
      <el-form inline>
        <el-form-item label="用户名: ">
          <el-input v-model="userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-loading="loading">
        <el-table class="lt-table" :data="tableData">
          <lt-table-column-edit prop="userName" label="用户名" />
          <lt-table-column-edit prop="password" label="密码" />
          <lt-table-column-edit
            prop="isEnable"
            label="是否启用"
            state="switch"
            active-value="1"
            inactive-value="0"
          ></lt-table-column-edit>
          <lt-table-column-operation
            v-model="tableData"
            width="180"
            :row-data="rowData"
            primary-key="userId"
            focusColumn="userName"
            deleteApi="deleteUser"
            saveApi="addUser"
            editApi="updateUser"
            @delete-confirm="refresh"
          >
            <template #after="{ row }">
              <el-link class="mr-l10" type="success" :underline="false" @click="clickBefore(row)">
                切换用户
              </el-link>
            </template>
          </lt-table-column-operation>
        </el-table>
        <div class="pd-t15 d-flex j-center">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            @current-change="getTableData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // 组件引入,直接使用
  import { reactive, ref } from 'vue'
  import { getUserPage } from '@/api/columnEditApi/columnEditApi'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import userLoading from '@/hooks/useLoading'
  const { loading, openLoad, closeLoad } = userLoading()

  const userName = ref<string>('')
  const pageNum = ref<number>(1)
  const pageSize = ref<number>(10)
  const total = ref<number>(0)
  const tableData: any = ref([])
  const rowData = reactive({
    userId: '',
    userName: '',
    password: '',
    isEnable: '1'
  })

  const getTableData = () => {
    openLoad()
    getUserPage({
      userName: userName.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }).then(res => {
      const result: any = res
      tableData.value = result.data
      total.value = result.total
      closeLoad()
    })
  }

  const refresh = () => {
    pageNum.value = 1
    pageSize.value = 10
    getTableData()
  }

  const clickBefore = (row: any) => {
    ElMessageBox.confirm('该操作回切换当前用户,您确定吗? ', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      localStorage.setItem('userId', row.userId)
      ElMessage({
        message: `切换成功,当前用户为: ${row.userName}`,
        type: 'success'
      })
      location.reload()
    })
  }

  getTableData()
</script>

<style lang="scss" scoped>
  .el-form--inline .el-form-item {
    margin-right: 15px;
  }
</style>
